<!-- Name -->
<che-label-container che-label-name="Name" che-label-description="Define a name for your workspace.">
  <ng-form flex layout="column" name="workspaceNameForm">
    <che-input-box
      ng-init="readyToGoStacksController.registerForm(readyToGoStacksController.WORKSPACE_NAME_FORM, workspaceNameForm)"
      che-form="workspaceNameForm" che-name="workspaceName" id="workspace-name-input"
      che-place-holder="Name of the workspace" aria-label="Name of the workspace"
      ng-model="readyToGoStacksController.workspaceName"
      che-on-change="readyToGoStacksController.onDevfileNameChange($value)"
      ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 200, 'blur': 0 }, allowInvalid: false }"
      required custom-validator="readyToGoStacksController.isNameUnique($value)" ng-minlength="3" ng-maxlength="100"
      ng-pattern="/^[a-z\d][a-z\d-.]+[a-z\d]$/i">
      <div ng-message="required">A name is required.</div>
      <div ng-message="minlength">
        The name has to be more than 3 characters long.
      </div>
      <div ng-message="pattern">
        The name should not contain special characters like space, dollar, etc.
        and should start and end only with digits, latin letters or underscores.
      </div>
      <div ng-message="maxlength">
        The name has to be less than 100 characters long.
      </div>
      <div ng-message="customValidator">
        This workspace name is already used.
      </div>
    </che-input-box>
  </ng-form>
</che-label-container>

<!-- Namespace selector -->
<che-label-container che-label-name="{{ readyToGoStacksController.getNamespaceCaption() }}"
  ng-if="readyToGoStacksController.getNamespaces().length > 0 || readyToGoStacksController.getNamespaceEmptyMessage()">
  <namespace-selector
  on-namespace-change="readyToGoStacksController.onNamespaceChanged(namespaceId)">
  </namespace-selector>
</che-label-container>

<!-- Stack devfile selector -->
<che-label-container che-label-name="Select Stack"
  che-label-description="Choose your workspace runtime environment used to build and run your projects.">
  <devfile-selector on-devfile-select="readyToGoStacksController.onDevfileSelected(devfile)"
    stack-name="readyToGoStacksController.stackName">
  </devfile-selector>
</che-label-container>

<!-- Project source selector -->
<che-label-container che-label-name="Projects">
  <project-source-selector devfile="readyToGoStacksController.selectedDevfile"
    on-change="readyToGoStacksController.onProjectSelectorChange()"></project-source-selector>
</che-label-container>

<!-- Create Workspace Button -->
<che-label-container>
  <ng-transclude></ng-transclude>
</che-label-container>
